<template>
	<view style="" class="flex flex-x-b flex-y-center" :class="scroll?'scroll flex-x-start':''"
		:style="{height,'padding-bottom':paddingB}">

		<template v-if="!scroll">
			<view @tap="channge(key)" style="height: 100%;" class="flex flex-y-center" v-for="(item,key) in list"
				:key="key">
				<view class="tabs-item" style="white-space: nowrap;" :style="tab_index == key?'':'padding:0 10rpx;'"
					:class="tab_index == key ?'tab-active':''">{{item.name}}</view>
			</view>
		</template>
		<template v-else>
			<view @tap="channge(key)" style="height: 100%;display: inline-block;" class="flex flex-y-center "
				v-for="(item,key) in list" :key="key">
				<view class="tabs-item" style="margin-right: 38rpx;" :class="tab_index == key ?'tab-active':''"
					:style="tab_index == key && activeColor ?('color:' + activeColor +';'):'' +  ('font-size:' + tab_index == key?activeSize:size +';')">
					<text class="pr" style="z-index: 3;">{{item.name}}</text>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		name: "tabs",
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			height: {
				type: String,
				default: '100rpx'
			},
			index: {
				type: Number,
				default: 0,
			},
			//下边距
			paddingB: {
				type: String,
				default: '0rpx'
			},
			//是否可左右滑动
			scroll: {
				type: Boolean,
				default: false,
			},
			color: {
				type: String,
				default: ''
			},
			activeColor: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: '28rpx'
			},
			activeSize: {
				type: String,
				default: '40rpx'
			}

		},
		created() {
			this.tab_index = this.index;
		},
		data() {
			return {
				tab_index: 0,
			};
		},
		methods: {
			channge(index) {
				this.tab_index = index;
				this.$emit('change', index);
			}
		}
	}
</script>

<style lang="scss">
	.tabs-item {
		font-size: 26rpx;
		color: #666666;
		font-weight: 400;
		position: relative;

	}

	.tab-active {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
	}

	// .tab-active::after {
	// 	position: absolute;
	// 	content: '';
	// 	bottom: -12rpx;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// 	width: 24rpx;
	// 	height: 8rpx;
	// 	background: url(../../static/erqi/samall.png) left top / 100% 100% no-repeat;
	// }
	.tab-active::after {
		position: absolute;
		content: '';
		width: 40rpx;
		height: 20rpx;
		background-color: rgba(109,158,251, 0.7);
		left: 50%;
		top: 60%;
		transform: translate(-50%,-50%) rotate(-45deg);
		border-radius: 50%;
		z-index: 1;
	}

	.scroll {
		white-space: nowrap;
	}
</style>
